<template>
    <div class="setting">
        <div class="line">
            <div>
                <div t>周子健</div>
                <span t>17739039954</span>
            </div>
        </div>
        <div class="line">
            <div t>桌面</div>
        </div>
        <div class="line">
            <div>
                <div t>护眼模式</div>
                <span t>理论可过滤30%蓝光</span>
            </div>
            <input type="checkbox" v-model="mainStore.safeEye">
        </div>
        <div class="line">
            <div t>绑定管理</div>
        </div>
        <div class="line">
            <div t>隐私保护</div>
        </div>
        <div class="line" @click="clearCeche">
            <div t>清除缓存</div>
            <span>共{{ chcheSize }}{{ chcheLength > 1000 ? 'MB' : 'KB' }}</span>
        </div>
        <div class="line">
            <div t>本地APP</div>
            <span>共{{ chcheSize }}{{ chcheLength > 1000 ? 'MB' : 'KB' }}</span>
        </div>
    </div>
</template>

<script setup lang="ts">
import { watch } from "vue"
import { useMainStore } from "@/store/mainStore"
import { storeToRefs } from "pinia"

let mainStore = useMainStore()
let mainStoreRef = storeToRefs(mainStore)
let chcheLength = (JSON.stringify(localStorage).length + document.cookie.length + JSON.stringify(sessionStorage).length) * 2
let chcheSize = (chcheLength > 1000 ? chcheLength / 1024 / 1024 : chcheLength / 1024).toFixed(2)

// let safeEye =ref(mainStore.safeEye.value)

function clearCeche() {
    localStorage.clear()
    sessionStorage.clear()
    document.cookie = "username=;expires=Thu, 01 Jan 1970 00:00:00 UTC";
}

watch(mainStoreRef.safeEye, mainStore.changeSafeEye)
</script>
<style>
.setting {
    width: 90%;
    margin: 0 auto;
}

.line {
    margin: 0 auto;
    overflow: hidden;
    margin: 10px 0;
    padding: 10px 0 15px 0;
    border-bottom: 2px solid #eeeeee;
    display: flex;
    justify-content: space-between;
}

.line div[t] {
    line-height: 18px;
    padding: 2px 0;
    font-style: normal;
    display: flex;
    align-items: center;
    font-size: 19px;
    font-weight: bold;
    margin: 3px 0;
}

.line span[t] {
    font-weight: bold;
    color: #929292;
}
</style>